<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Layouts - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Layouts - Pure"><meta data-react-helmet="true" name="description" content="Quickstart your next web project with these example layouts."><meta data-react-helmet="true" property="og:description" content="Quickstart your next web project with these example layouts."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/8c4a11be.2a938c81.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="layouts"><div class="header"><h1>Layouts</h1><h2>Quickstart your next web project with these example layouts.</h2></div><div class="content"><h2 id="common-layouts" class="content-subhead">Common Layouts<a href="#common-layouts" class="content-link" title="Heading anchor"></a></h2><p>Pure was crafted with the goal that it can be used in every web project. To showcase this, we&#x27;ve made some common layouts that leverage Pure. These layouts are responsive and don&#x27;t require JavaScript (except for certain menu interactions).</p><aside><p>When viewing these layouts, view or copy the source to get a good understanding of what&#x27;s happening. These layout examples are free to use in your own projects under the <a href="http://www.zlib.net/zlib_license.html">zLib license</a>.</p></aside><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/blog/"><img src="/img/layouts/blog@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Blog example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Blog</h3><p>A layout example that shows off a blog page with a list of posts.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-buttons pure-u"><a href="/buttons">buttons</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/blog/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/blog" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/email/"><img src="/img/layouts/email@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Email example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Email</h3><p>A layout example that shows off a responsive email layout.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-buttons pure-u"><a href="/buttons">buttons</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/email/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/email" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/gallery/"><img src="/img/layouts/gallery@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Photo Gallery example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Photo Gallery</h3><p>A layout example that shows off a responsive photo gallery.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-forms pure-u"><a href="/forms">forms</a></li><li class="layout-item-module layout-item-module-buttons pure-u"><a href="/buttons">buttons</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/gallery/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/gallery" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/marketing/"><img src="/img/layouts/marketing@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Landing Page example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Landing Page</h3><p>A layout example that shows off a responsive product landing page.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-forms pure-u"><a href="/forms">forms</a></li><li class="layout-item-module layout-item-module-buttons pure-u"><a href="/buttons">buttons</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/marketing/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/marketing" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/pricing/"><img src="/img/layouts/pricing@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Pricing Table example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Pricing Table</h3><p>A layout example that shows off a responsive pricing table.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-buttons pure-u"><a href="/buttons">buttons</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/pricing/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/pricing" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/side-menu/"><img src="/img/layouts/side-menu@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Responsive Side Menu example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Responsive Side Menu</h3><p>A layout example with a side menu that hides on mobile, just like the Pure website.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/side-menu/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/side-menu" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/tucked-menu-vertical/"><img src="/img/layouts/tucked-menu-vertical@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Responsive Horizontal-to-Vertical Menu example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Responsive Horizontal-to-Vertical Menu</h3><p>A set of horizontal menus that switch to vertical and which hide at small window widths.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-grids pure-u"><a href="/grids">grids</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/tucked-menu-vertical/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/tucked-menu-vertical" class="pure-button">Source</a></p></div></div><div class="layout-item l-wrap pure-g"><div class="layout-item-screenshot content pure-u-1 u-sm-1-2"><a href="/layouts/tucked-menu/"><img src="/img/layouts/tucked-menu@2x.jpg" class="pure-img-responsive" width="400" height="214" alt="Screenshot of Responsive Horizontal-to-Scrollable Menu example layout"></a></div><div class="layout-item-content content pure-u-1 u-sm-1-2"><h3 class="layout-item-head">Responsive Horizontal-to-Scrollable Menu</h3><p>Showcases a horizontal menu that hides at small window widths, and which scrolls when revealed.</p><ul class="layout-item-modules pure-g"><li class="layout-item-module layout-item-module-base pure-u"><a href="/base">base</a></li><li class="layout-item-module layout-item-module-menus pure-u"><a href="/menus">menus</a></li></ul><p><a href="/layouts/tucked-menu/" class="pure-button pure-button-primary">View</a><a href="https://github.com/pure-css/pure/tree/master/site/static/layouts/tucked-menu" class="pure-button">Source</a></p></div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/8c4a11be.2a938c81.js"></script>


</body>
</html>